<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="918" height="540"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
        //我们前面的聊天框案例还记得吧，十分有趣，可是实现起来还是挺费劲的，那么我们为什么不封装成一个类，想用时候直接new呢？来，我们说干就干。

        class chatPath {
            // 在构造函数中传入起始点位并进行绘制
            constructor(startX, startY) {
                this.x = startX;
                this.y = startY;
                this.path = new Path2D();
            }

            // 搞一个绘画函数，用来真正的进行绘画
            draw() {
                this.path.moveTo(this.x, this.y);
                this.path.quadraticCurveTo(this.x, this.y - 100, this.x + 100, this.y - 100);
                this.path.lineTo(this.x + 300, this.y - 100);
                this.path.quadraticCurveTo(this.x + 400, this.y - 100, this.x + 400, this.y);
                this.path.quadraticCurveTo(this.x + 400, this.y + 100, this.x + 300, this.y + 100);
                this.path.lineTo(this.x + 100, this.y + 100);
                this.path.lineTo(this.x, this.y + 150);
                this.path.lineTo(this.x + 70, this.y + 100);
                this.path.quadraticCurveTo(this.x, this.y + 100, this.x, this.y);
                ctx.stroke(this.path);
            }
        }

        // 这样即可实现封装的使用
        new chatPath(200,200).draw();
    </script>
</body>

</html>